<template>
	<div>
		<form>

			<el-row>
				<el-col :span="10">

					<el-input v-model="query.roleName" placeholder="请输入角色名称"></el-input>
				</el-col>

				<el-col :span="4">

					<el-button type="primary" @click="list">查询</el-button>
					<el-button type="primary" @click="add">添加</el-button>

				</el-col>
			</el-row>
		</form>

		<el-table :data="tableData" size="mini"  style="width: 100%">


			<el-table-column label="主键"  prop="roleId">
			</el-table-column>
			<el-table-column label="角色名称" prop="roleName">
			</el-table-column>
			<el-table-column label="关联菜单">
				<template slot-scope="scope">
					<el-button size="mini" @click="roleMenus(scope.row.roleId)" >关联菜单</el-button>
					
				</template>
			</el-table-column>
						
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.row.roleId)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row.roleId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination background layout="prev, pager, next" @current-change="currentChange" :current-page.sync="query.pageNo"
		 :page-size="query.pageSize" :total="total">
		</el-pagination>

		<el-dialog title="角色编辑" :visible.sync="showEdit" width="480px">

			<RoleEdit :showEdit.sync="showEdit" @update="list" :roleId="roleId" :key="showNum"></RoleEdit>

		</el-dialog>



		<el-dialog title="关联菜单" :visible.sync="showRoleMenu" width="380px">
		
			<RoleMenu :showRoleMenu.sync="showRoleMenu"  :roleId="roleId" :key="showNum"></RoleMenu>
		
		</el-dialog>
		
		
	</div>
</template>

<script>
	import RoleEdit from '@/views/role/edit'
	import RoleMenu from '@/views/role/role-menu'
	export default {
		name: 'RoleList',
		components: {
			RoleEdit,RoleMenu
		},
		data() {
			return {
				showNum: 0,
				
				total: 0,
				roleId: null,
				showEdit: false,
				showRoleMenu:false,
				query: {
					pageSize: 10,
					pageNo: 1,
					roleName: ''
				},
				tableData: []
			}
		},
		methods: {
			list() {
			
				this.axios.get('/role?type=query',(data)=>{
					this.tableData = data.list;
					this.pageSize = data.pageSize;
					this.total = data.totalCount;
				},this.query);
			},
			add() {
				this.showNum++;
				this.showEdit = true;
			},
			edit(id) {
				this.roleId = id;
				this.showNum++;
				this.showEdit = true;
			},
			del(id){
				this.axios.get('/role?type=del',(data)=>{
					if(data){
						this.$alert("删除成功","提示",{
							type:'success'
						});
						//刷新页面
						this.list();
					}
				},{
					roleId:id
				});
			},
			currentChange() {
				this.list();
			},
			roleMenus(roleId){
				this.showNum++;
				this.roleId = roleId;
				
				this.showRoleMenu = true;
			}

		},
		created() {

			this.list();
		}
	}
</script>

<style>
</style>
